<template>
  <div>
     <h1>重置密码</h1>
     <div style="width: 500px; margin:20px;">
     <el-form label-width="120px" :rules="rules" ref="passForm" :model="addForm">
      <el-form-item label="原密码" prop="old_pwd">
        <el-input v-model="addForm.old_pwd" placeholder="请输入原始密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="new_pwd">
        <el-input v-model="addForm.new_pwd"  placeholder="请输入原始密码"></el-input>
      </el-form-item>
        <el-form-item label="确认新密码" prop="re_pwd">
         <el-input v-model="addForm.re_pwd" placeholder="请输入原始密码"></el-input>
       </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="toEdit">确认修改</el-button>
        <el-button type="success">重置</el-button>
       </el-form-item>
     </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
 import {UpdatePassService} from '@/api/user'
 import {reactive,ref} from 'vue'
 import type {FormInstance} from 'element-plus'
 import {ElMessage} from 'element-plus'
 import {useRouter} from 'vue-router'
 let router=useRouter()
 let addForm = reactive({
   new_pwd:"",
   old_pwd:"",
  re_pwd:""
 })
 let rules={
  old_pwd:[{required:true,message:"原始密码不能为空",trigger:"blur"}],
  new_pwd:[{required:true,message:"新密码不能为空",trigger:"blur"},
    {min:6,max:15,message:"密码长度在6-15位之间",trigger:"blur"}
  ],
  re_pwd:[{validator:(rule:any,value:any,callback:any)=>{
     if(value!=addForm.new_pwd){
      callback(new Error("俩次密码不一直"))
     }else{
      callback()
     }
  },trigger:"blur"}]
 }
 let passForm=ref<FormInstance|null>()
 let toEdit=async ()=>{
  passForm.value?.validate(async (valid)=>{
     if(valid){
      let res=await UpdatePassService(addForm)
      console.log(res);
      ElMessage.success("修改成功")
      router.push("/login")
     }
  })
 }
</script>